<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="50%"
    class="terms-dialog"
  >
    <div class="terms-content" v-html="content"></div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">我知道了</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'ServiceTermsDialog',
  props: {
    value: {
      type: Boolean,
      required: true
    },
    type: {
      type: String,
      required: true,
      validator: value => ['terms', 'privacy'].includes(value)
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    },
    dialogTitle() {
      return this.type === 'terms' ? '服务条款' : '隐私政策';
    },
    content() {
      if (this.type === 'terms') {
        return `
          <h3>京剧苑用户服务条款</h3>
          <p>欢迎使用京剧苑！在使用我们的服务之前，请仔细阅读以下条款：</p>
          <ol>
            <li>用户在使用本网站服务时必须遵守中华人民共和国相关法律法规。</li>
            <li>用户注册时必须提供真实、准确的个人信息。</li>
            <li>用户不得利用本网站从事任何违法违规活动。</li>
            <li>用户在网站发布的内容必须遵守相关规定，不得包含违法、侵权等信息。</li>
            <li>本网站保留随时修改服务条款的权利。</li>
          </ol>
        `;
      } else {
        return `
          <h3>京剧苑隐私政策</h3>
          <p>我们重视您的隐私保护，承诺：</p>
          <ol>
            <li>仅收集必要的用户信息用于服务提供。</li>
            <li>采取严格的安全措施保护用户数据。</li>
            <li>未经用户同意，不向第三方分享用户个人信息。</li>
            <li>用户有权查询、更正自己的个人信息。</li>
            <li>定期更新隐私保护措施以确保用户信息安全。</li>
          </ol>
        `;
      }
    }
  }
};
</script>

<style scoped>
.terms-dialog {
  font-family: 'STZhongsong', sans-serif;
}

.terms-content {
  line-height: 1.8;
  font-size: 15px;
}

.terms-content h3 {
  color: #FFD700;
  text-align: center;
  margin-bottom: 20px;
}

.terms-content p {
  margin-bottom: 15px;
}

.terms-content ol {
  padding-left: 20px;
}

.terms-content li {
  margin-bottom: 10px;
}
</style> 